﻿<p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
<Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<ValidateForm class="form-inline" Model="@Model">
    <div class="row">
        <div class="form-group col-12">
            <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" />
        </div>
    </div>
</ValidateForm>
<Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
<div class="form-inline">
    <div class="row">
        <div class="form-group col-12">
            <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
        </div>
    </div>
</div>
<Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
<div class="form-inline">
    <div class="row">
        <div class="form-group col-12">
            <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="自定义城市" ShowLabel="true" />
        </div>
    </div>
</div>

@code {
    private Foo Model { get; set; } = new Foo() { Name = "" };

    private IEnumerable<string> StaticItems => new List<string> { "1", "12", "123", "1234", "12345", "123456", "abc", "abcdef", "ABC", "aBcDeFg", "ABCDEFG" };
}